<template>
  <div class="block">
    <a-drawer :title="blockOptions.name" placement="right" :width="550" :closable="false" :visible="show" @close="onClose">
      <div class="box">
        <div class="content-block">
          <a-row v-for="(item, i) in conditions" :key="i" class="content-item" type="flex" align="middle">
            <a-col :span="5" class="ove">{{ item.label }}</a-col>
            <a-col :span="17">
              <!-- 数字框 -->
              <template v-if="item.widgetType === 'number'">
                <a-select v-model="item.rune" style="width: 120px">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-input-number v-model="item.value" style="width: calc(100% - 140px)" />
              </template>
              <!-- 文本框 -->
              <template v-if="item.widgetType === 'textarea'">
                <a-select v-model="item.rune" style="width: 120px">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-textarea v-model="item.value" style="width: calc(100% - 140px)" :auto-size="true" />
              </template>
              <!-- 输入框 -->
              <template v-if="item.widgetType === 'input'">
                <a-select v-model="item.rune" style="width: 120px">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-input v-model="item.value" style="width: calc(100% - 140px)" @change="onChangeInput" />
              </template>
              <!-- 日期选择 -->
              <template v-if="item.widgetType === 'date'">
                <a-select v-model="item.rune" style="width: 120px" @change="handleChange">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-date-picker v-model="item.value" format="YYYY-MM-DD" style="width: calc(100% - 140px)" @change="onChange" />
              </template>
              <!-- 时间选择 -->
              <template v-if="item.widgetType === 'time'">
                <a-select v-model="item.rune" style="width: 120px" @change="handleChange">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-time-picker
                  v-model="item.value"
                  style="width: calc(100% - 140px)"
                  :default-open-value="moment('00:00:00', 'HH:mm:ss')"
                  @change="onChange"
                />
              </template>
              <!-- 单选下拉框 -->
              <template v-if="item.widgetType === 'select'">
                <a-select v-model="item.rune" style="width: 120px" @change="handleChange">
                  <a-select-option v-for="ite in connds" :key="ite.value" :value="ite.value">{{ ite.key }}</a-select-option>
                </a-select>
                <a-select v-model="item.value" style="width: calc(100% - 140px)" @change="handleChange">
                  <a-select-option v-for="ite in selects.find(key => key.key === item.code).value" :key="ite.value" :value="ite.value">{{
                    ite.label
                  }}</a-select-option>
                </a-select>
              </template>
            </a-col>
            <a-col :span="2">
              <a-icon type="delete" @click="del(item, i)" />
            </a-col>
          </a-row>
        </div>
        <a-row type="flex" align="middle">
          <a-button type="primary" icon="plus" @click="addContition">
            添加条件
          </a-button>
          <span class="sub_tit mg_l12">还有{{ canUseNum }}个可用条件</span>
          <!-- <a-popover>
            <template slot="content">
              <p>Content</p>
              <p>Content</p>
            </template>
            <span class="primary mg_l_o">
              <a-icon type="question-circle" />如何添加更多条件
            </span>
          </a-popover> -->
        </a-row>
      </div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onSubmit">
          确认
        </a-button>
      </div>
    </a-drawer>
    <AddConditionDrawer :visible="showCondition" :options="conditionsOptions" @change="changeCb" />
  </div>
</template>

<script>
import { isJson } from "@/utils";
import AddConditionDrawer from "./AddConditionDrawer";
export default {
  name: "Block",
  components: { AddConditionDrawer },

  props: ["show", "blockOptions", "formlist", "process"],
  data() {
    return {
      defNumber: "",
      conditions: [],
      showCondition: false,
      conditionsOptions: [],
      copyConditions: [],
      canUseNum: 0,
      keys: ["phone"]
    };
  },
  computed: {
    // 条件
    connds() {
      return [
        { key: "不等于(不是)", value: "!=" },
        { key: "小于", value: "<" },
        { key: "小于等于", value: "<=" },
        { key: "等于(是)", value: "==" },
        { key: "大于", value: ">" },
        { key: "大于等于", value: ">=" },
        { key: "包含，属于", value: "in" },
        { key: "不包含，不属于", value: "notin" }
      ];
    },
    // 下拉框
    selects() {
      const Array = this.formlist
        .filter(key => key.widgetType === "select")
        .map(key => {
          return {
            key: key.code,
            value: key.props.options.options
          };
        });
      return Array;
    }
  },
  watch: {
    show(val) {
      if (val) {
        const props = this.blockOptions.props;
        this.blockOptions.props = isJson(props) ? JSON.parse(props) : props;
        this.conditions = this.blockOptions.props.conditions || [];
        this.copyConditions = JSON.parse(JSON.stringify(this.blockOptions.props.conditions));
        this.canUseNum = this.formlist.filter(k => k.required && !this.keys.includes(k.code)).length - this.conditions.length;
      }
    }
  },

  methods: {
    // 确认条件
    onSubmit() {
      this.conditions = this.conditions.map(item => {
        return {
          code: item.code,
          formCode: item.code,
          label: item.label,
          value: item.value,
          rune: item.rune,
          widgetType: item.widgetType
        };
      });
      const conditions = this.conditions.filter(key => key.value && key.rune);
      let operationName;
      if (conditions.length) {
        operationName = conditions.map(key => {
          const isSelect = key.widgetType === "select";
          isSelect
            ? (key.operationName = `${key.label}  ${this.connds.find(k => k.value === key.rune).key} ${
                this.selects.find(k => k.key === key.code).value.find(v => v.value === key.value)["label"]
              }`)
            : (key.operationName = `${key.label} ${this.connds.find(k => k.value === key.rune).key} ${key.value}`);
          if (key.widgetType === "time") {
            key.operationName = `${key.label} ${this.connds.find(k => k.value === key.rune).key} ${key.value.toString().split(" ")[4]}`;
          }
          if (key.widgetType === "date" && key.value) {
            key.operationName = `${key.label} ${this.connds.find(k => k.value === key.rune).key} ${key.value.format("YYYY-MM-DD")}`;
          }
          return key.operationName;
        });
      }
      this.blockOptions.operationName = operationName ? operationName.join(" 并且 ") : "请选择条件";
      this.blockOptions.props.conditions = conditions;
      this.blockOptions.props.conditions.map(k => (k.formSetting = this.formlist));
      this.$emit("update:show", false);
      this.$emit("change", this.blockOptions);
    },
    // 关闭弹窗
    onClose() {
      this.blockOptions.props.conditions = this.copyConditions;
      this.$emit("update:show", false);
      this.$emit("change", this.blockOptions);
    },
    // 添加条件
    addContition() {
      this.showCondition = true;
      const formlist = JSON.parse(JSON.stringify(this.formlist)).filter(k => k.required);
      const code = this.conditions.map(key => key.code);

      formlist.map(key => {
        const haCode = this.conditions.find(k => k.code === key.code);
        key.checked = code.includes(key.code);
        key.rune = haCode ? haCode.rune : "";
        key.value = haCode ? haCode.value : undefined;
        return key;
      });
      this.conditionsOptions = formlist.filter(k => !this.keys.includes(k.code));
    },
    changeCb({ visible, options }) {
      this.showCondition = visible;
      if (options) {
        this.conditions = options.filter(key => key.checked);
        this.canUseNum = this.formlist.filter(k => k.required).length - this.conditions.length;
      }
    },
    // 删除 条件
    del(item, i) {
      this.conditions.splice(i, 1);
    },
    handleChange(e, formcode) {},
    onChange(e) {},
    onChangeInput(e) {}
  }
};
</script>
<style lang="scss" scoped>
.box {
  overflow: auto;
}
.content-block {
  margin: 24px 0;
  .content-item {
    margin-bottom: 24px;
  }
}
</style>
